<template>
 <div>
   <el-date-picker
       v-model="timeEnd"
       type="date"
       placeholder="选择日期"
       :class="timeEndNow && !timeEnd?'time-picker':''"
       :placeholder="timeEndNow?'':'请选择'"
       :picker-options="{
         shortcuts: [{
            text: '至今',
            onClick(picker) {
              now(picker)
            }
          }]
        }">
   </el-date-picker>
 </div>
</template>

<script>
export default {
  name: "user-com",
  data(){
    return{
      timeEnd: "",
      // 需要自定义一个字段来单独控制显示至今选项
      timeEndNow: false,
    }
  },
  methods:{
    // 选择至今的操作
    now(picker) {
      this.timeEndNow = true;
      this.timeEnd = "";
      picker.$emit('pick','');
    },
  }
}
</script>

<style lang="less" scoped>
.time-picker {
/deep/ .el-input__inner {
  padding-left: 0.45rem;
}
/deep/ .el-icon-date {
  margin-left: 0.1rem;
  width: 50px;
  color: #333;
&::before {
   content: '至今';
 }
&::after {
   content: '';
 }
}
}
</style>